
<script type="text/javascript" src="/statics/js/tem/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/statics/js/tem/xSlider.js"></script>

<script type="text/javascript">
	var slider = new osSlider({ //开始创建效果
		pNode:'.slider', //容器的选择器 必填
		cNode:'.slider-main li', //轮播体的选择器 必填
		speed:3000, //速度 默认3000 可不填写
		autoPlay:true //是否自动播放 默认true 可不填写
	});
</script>
<style>
.fl {float:left;}
.fr {float:right;}
.osSlider-main .slider-btn-prev {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: -45px;
    width: 40px;
    height: 60px;
    text-indent: -9999px;
    margin-top: -20px;
    background: url(/statics/images/tem/left.png) 50% 50% no-repeat;
    transition: all .5s linear;
}

.osSlider-main:hover .slider-btn-prev {
    left: 5%;
}
    /* 下一个 */
.osSlider-main .slider-btn-next {
    position: absolute;
    z-index: 30;
    top: 50%;
    right: -45px;
    width: 40px;
    height: 60px;
    text-indent: -9999px;
    margin-top: -20px;
    background: url(/statics/images/tem/right.png) 50% 50% no-repeat;
    transition: all .5s linear;
}

.osSlider-main:hover .slider-btn-next {
    right: 5%;
}

/* 高亮导航部分 */
.osSlider-main .slider-nav {
    position: absolute;
    width:100%;
    height: 22px;
    bottom: 20px;
    text-align: center;
    z-index: 25;
}
.osSlider-main .slider-nav li {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    margin: 0 12px;
    font-size: 12px;
    color: #eee;
    border: 1px solid #eee;
    background: none;
    cursor: pointer;
}
.osSlider-main .slider-nav li.active {
    color: #333;
    background: #eee;
}
.osSlider-main .slider-nav li:hover {
    border: 1px solid #f60;
    background: #f60;
}
.slider-main li a{
	display:block;
}

</style>

<div  class="htmleaf-container">
	<div class="slider" style="width:100%;">
		<ul class="slider-main">
			<li>
				<img style="width:100%;height:auto;" src="/statics/images/banner/1526612214.jpg" alt="">
			</li>
			<li>
				<img style="width:100%;height:auto;" src="/statics/images/banner/1526612214.jpg" alt="">
			</li>
			<li>
				<img style="width:100%;height:auto;" src="/statics/images/banner/1526612214.jpg" alt="">
			</li>
		</ul>
	</div>
</div>